import React, {useEffect, useRef, useState} from 'react';
import {Button, Form, message, Input, Popconfirm, Table, Pagination} from "antd";
import style from './BlogsComment.moudel.scss'
import {SearchOutlined, SyncOutlined} from "@ant-design/icons";
import {inquireBlogCommentList, deleteBlogComment} from "./BlogsCommentApi";
import {timestampToTime} from "../../utils/dateTimeUtlis";

function BlogsComment() {
    const [SearchData, setSearchData] = useState({})
    const formRef = useRef()
    const [ListQuery, setListQuery] = useState({page: 1, limit: 10})
    const [dataSource, setDataSource] = useState([])
    const [TableLoading, setTableLoading] = useState(false)
    const [total,setTotal] = useState(0)
    const columns = [
        {
            align: 'center',
            title: '用户昵称',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            align: 'center',
            title: '用户账号',
            dataIndex: 'userNumber',
            key: 'userNumber',
        },
        {
            align: 'center',
            title: '文章名称',
            dataIndex: 'blogTitle',
            key: 'blogTitle',
        },
        {
            align: 'center',
            title: '评论内容',
            ellipsis: true,
            dataIndex: 'commentContent',
            key: 'commentContent',
        },
        {
            align: 'center',
            title: '评论时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
            render: (text) => {
                return timestampToTime(new Date(text).getTime(), 'all')
            }
        },
        {
            align: 'center',
            title: '操作',
            key: 'Tags',
            fixed: 'right',
            render: (text) => {
                return (
                    <div>
                        <Popconfirm
                            title="是否删除该评论"
                            onConfirm={() => confirm(text.id)}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button danger>删除</Button>
                        </Popconfirm>
                    </div>
                )
            }
        },
    ];


    // 删除
    const confirm = (id) => {
        deleteBlogComment({id: id}).then(res => {
            if (res.code === '200') {
                message.success('删除成功')
                getList()
            } else {
                message.error('删除失败')
            }
        }).catch(err => {
            message.error('删除失败')
        })
    };

    const inputChange = (e, name) => {
        setSearchData({...SearchData, [name]: e.target.value})
    }

    const showTotal = (total) => `${total} 条`;


    // 查询
    const inquire = () => {
        getList()
    }
    // 重置
    const reset = () => {
        setSearchData({})
        formRef.current.resetFields()
        setListQuery({page: 1, limit: 10})
    }

    // 页码的改变
    const getCurrent = (page) => {
        setListQuery({...ListQuery, page: page})
    }


    // 请求数据
    const getList = () => {
        setTableLoading(true)
        inquireBlogCommentList({ListQuery, SearchData}).then(res => {
            if (res.code === '200') {
                if (!res.data.data.length) {
                    message.info('暂无数据')
                    setDataSource([])
                }
                setDataSource(res.data.data)
                setTotal(res.data.total)
            } else {
                message.success('查询失败')
            }
        }).catch(e => {
            message.error('查询失败')
        }).finally(() => {
            setTableLoading(false)
        })
    }

    useEffect(() => {
        getList()
    }, [ListQuery])

    return (
        <div className={style.BlogsComment}>
            <div style={{marginBottom: '10px'}}>
                <Form
                    name="formRef"
                    ref={formRef}
                    spacing={15}
                    labelCol={{span: 7}}
                    wrapperCol={{span: 20}}
                    layout="inline"
                    style={{maxWidth: 1000}}
                    initialValues={{remember: true}}
                    autoComplete="off"
                >
                    <Form.Item
                        style={{marginLeft: '20px'}}
                        colon={true}
                        label="用户昵称"
                        name="userName"
                    >
                        <Input value={SearchData.userName} onChange={(e) => inputChange(e, 'userName')}></Input>
                    </Form.Item>

                    <Form.Item
                        style={{marginLeft: '30px'}}
                        colon={true}
                        label="文章名称"
                        name="blogTitle"
                    >
                        <Input onChange={(e) => inputChange(e, 'blogTitle')}></Input>
                    </Form.Item>

                    <Form.Item
                        style={{marginLeft: '20px'}}
                        spacing={15}
                        colon={true}
                    >
                        <div style={{display: 'flex'}}>
                            <Button
                                type="primary"
                                style={{margin: '0 5px'}}
                                onClick={inquire}
                                icon={<SearchOutlined/>}>
                                查 询
                            </Button>
                            <Button onClick={reset} icon={<SyncOutlined/>}>重置</Button>
                        </div>
                    </Form.Item>

                </Form>
            </div>
            <div>
                <div>
                    <Table dataSource={dataSource}
                           bordered={true}
                           columns={columns}
                           loading={TableLoading}
                           pagination={false}
                           rowKey='id'
                    />
                </div>
                <div style={{display: "flex", justifyContent: 'right', marginTop: '10px'}}>
                    <Pagination
                        current={ListQuery.page}
                        total={total}
                        onChange={getCurrent}
                        showTotal={showTotal}/>
                </div>
            </div>
        </div>
    );
}

export default BlogsComment;
